<template>
  <n-scrollbar>
    <div class="bg-cover bg-[url(https://picsum.photos/seed/100/300)] h-48 rounded-3xl m-5">
      <div class="flex flex-col items-center justify-center h-full">
        <div class="text-4xl font-bold text-white">基于特征挖掘的网络水军识别系统</div>
        <div class="text-2xl font-bold text-white">欢迎使用!</div>
      </div>
    </div>
    <n-divider></n-divider>
    <div class="container mx-auto p-4">
      <h1 class="text-3xl font-bold mb-4">系统介绍</h1>
      <div class="flex flex-wrap justify-start">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <img src="https://picsum.photos/seed/1/200" alt="图片描述" class="mb-4">
          <p class="text-lg font-medium">这是段落标题</p>
          <p class="text-gray-600 mb-4">这是段落描述</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <img src="https://picsum.photos/seed/2/200" alt="图片描述" class="mb-4">
          <p class="text-lg font-medium">这是段落标题</p>
          <p class="text-gray-600 mb-4">这是段落描述</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <img src="https://picsum.photos/seed/3/200" alt="图片描述" class="mb-4">
          <p class="text-lg font-medium">这是段落标题</p>
          <p class="text-gray-600 mb-4">这是段落描述</p>
        </div>
      </div>
    </div>
    <n-divider></n-divider>

    <div class="container mx-auto p-4">
      <div class="flex flex-wrap">
        <div class="w-full  p-4">
          <img src="https://picsum.photos/seed/4/400" alt="图片1描述"
               class="mb-4 h-auto mx-auto md:mx-0 md:float-left md:mr-4">
          <div class="text-lg font-medium mb-2">这是图片1的标题</div>
          <p class="text-gray-600">这是图片1的描述</p>
        </div>
        <div class="w-full p-4 text-right">
          <img src="https://picsum.photos/seed/5/400" alt="图片2描述"
               class="mb-4 h-auto mx-auto md:mx-0 md:float-right md:ml-4">
          <div class="text-lg font-medium mb-2">这是图片2的标题</div>
          <p class="text-gray-600">这是图片2的描述</p>
        </div>
      </div>
    </div>
  </n-scrollbar>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>